<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../css/header.css"/>
		<script src="../js/flexible.debug.js" type="text/javascript" charset="utf-8"></script>
		
		<link rel="stylesheet" type="text/css" href="../css/classifyContent.css"/>
		
	</head>
	<body>
		<header class="header">
			<span class="span"><img class="fanghui" src="../img/fanhui.png"/></span>
			<span class="span">新品连衣裙</span>
			<span class="span pingpu-a">
				<img src="../img/hamburger.psd.png"/>
				
			</span>
		</header>
		<main class="main">
			<header class="headers">
				<ul class="nav">
					<li>销量</li>
					<li>最新</li>
					<li>价格</li>
				</ul>
			</header>
			<section class="section">
				<div id="container">

					<ul class="col">
						
					</ul>

					<ul class="col" ></ul>
			
				
				</div>
				
				<div class="pingpu">
					
				</div>
				
			</section>
			<section class="section">
				<div id="container">

					<ul class="col">
						
					</ul>

					<ul class="col" ></ul>
			
				
				</div>
				
				<div class="pingpu">
					
				</div>
				
			</section>
			<section class="section">
				<div id="container">

					<ul class="col">
						
					</ul>

					<ul class="col" ></ul>
			
				
				</div>
				
				<div class="pingpu">
					
				</div>
				
			</section>
		</main>
		
		<script src="../js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$(function(){
				$('.pingpu-a').click(function(){
					location.href="classifyList.html";
				});
				$('.fanghui').click(function(){
					location.href="classify02.html";
				});
				
				
				
				
			})
		
	</script>
	<script src="../js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">

		$(function($){
		var html2 = "";
		var html = "";
			//url data function dataType
		 
			function loadMeinv(Html,hTml){
		
				var data = 0;
		
				var arr = ["zk女装 Ius恒指着恩开沉溺","2015夏装新款子字连衣裙","个性弹力修身小脚哈织厂库"]
				for(var i=0;i<9;i++){//每次加载时模拟随机加载图片
		
					data = parseInt(Math.random()*9);
		
					var round = Math.floor(Math.random()*arr.length) ;
					
					var numB =   arr[round]
					
					Html += '<li><img src = ../img/'
		
							+data+'.jpg><p>'
		
							+numB+'</p></li>';
		
					
		
					
		
				}
				for(var i=0;i<9;i++){//每次加载时模拟随机加载图片
		
					data = parseInt(Math.random()*9);
		
					
					hTml += '<li><img src = ../img/'
		
							+data+'.jpg><p>'
		
							+numB+'</p></li>';
				}
				
			
				
				
				$muse = getMinUl(1);
				$minUl = getMinUl(0);
				console.log($minUl);
				$minUl.append(Html);
				$muse.append(hTml);
			}
		
			loadMeinv(html,html2);
		
			$(window).on("scroll",function(){
		
				$minUl = getMinUl(0);
				$muse = getMinUl(1);
				if($minUl.height() <= $(window).scrollTop()+$(window).height()){
		
				//当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
		
					loadMeinv();
		
				}
				
				if($muse.height() <= $(window).scrollTop()+$(window).height()){
		
				//当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
		
					loadMeinv();
		
				}
		
			})
			
			
			
			
		
			function getMinUl(n){//每次获取最短的ul,将图片放到其后
		
				var $arrUl = $("#container .col");
		
				var $minUl =$arrUl.eq(n);
		
				$arrUl.each(function(index,elem){
		
					if($(elem).height()<$minUl.height()){
		
						$minUl = $(elem);
		
					}
		
				});
		
				return $minUl;
		
			}
			
		})
		
	</script>
	<script>
		$(function(){
			$('.nav li:first, .main section:first').addClass('curr').siblings().removeClass('curr');
            $('.nav li').click(function(){
	            $(this).addClass('curr').siblings().removeClass('curr');
	                  				$(".main section").eq($(this).index()).addClass('curr').siblings().removeClass('curr');
            });

		})
	</script>
	</body>
</html>
